<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<link rel=stylesheet href="{{=URL('static','css/custom.css')}}" />
		<head profile="http://www.w3.org/2005/10/profile">
		<link rel="icon" type="image/png" href="{{=URL('static','images/favicon.png')}}">
		{{include 'web2py_ajax.html'}}
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization,places&key=AIzaSyCBCJgn8lEHekUbVZwq768lfpR0VZwrTl0"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	    
		<!-- This is just the google piechart thing -->
	    <script type="text/javascript">
	      var data;
	      var chart;
	      // Load the Visualization API and the piechart package.
	      google.load('visualization', '1.0', {'packages':['corechart']});

	      // Set a callback to run when the Google Visualization API is loaded.
	      google.setOnLoadCallback(drawChart);

	      // Callback that creates and populates a data table,
	      // instantiates the pie chart, passes in the data and
	      // draws it.
	      function drawChart() {

	        // Create the data table.
	        data = new google.visualization.DataTable();
	        data.addColumn('string', 'Topping');
	        data.addColumn('number', 'Slices');
	        data.addRows([
	          ['Mushrooms', 3],
	          ['Onions', 1],
	        ]);

	        // Set chart options
	        var options = {'title':'Percentage of Total Development Cost',
	                       'width':300,
	                       'height':300};

	        // Instantiate and draw our chart, passing in some options.
	        chart = new google.visualization.PieChart(document.getElementById('locationDetails'));
	        chart.draw(data, options);
	      }

			var map;

			var initialize = function(){

				var mapOptions = {
					center: new google.maps.LatLng('-31.949735', '115.855256'),
					zoom: 15,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					disableDefaultUI: true,
					streetViewControl: true,
					streetViewControlOptions: {
						position: google.maps.ControlPosition.RIGHT_TOP 
					},
					mapTypeControl: true,
					mapTypeControlOptions: {
						position: google.maps.ControlPosition.TOP_RIGHT 
					},
				};
				map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

				var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
				var searchBox = new google.maps.places.SearchBox(input);

				google.maps.event.addListener(searchBox, 'places_changed', function() {
					var places = searchBox.getPlaces();
					var bounds = new google.maps.LatLngBounds();

					bounds.extend(places[0].geometry.location);

					map.fitBounds(bounds);
					map.setZoom(19)
				});

				google.maps.event.addListener(map, 'bounds_changed', function() {
					var bounds = map.getBounds();
					searchBox.setBounds(bounds);
				});

				var infoWindowOptions = {
					content:"loading"
				};
				var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

				var addListener = function (layer) {
					google.maps.event.addListener(layer, 'click', function(event) {
						var infoWindowContent = event.infoWindowHtml;
						var infoWindowPosition = event.latLng;
						infoWindow.setContent(infoWindowContent);
						infoWindow.setPosition(infoWindowPosition);
						infoWindow.open(map);

						// this stuff will be used for when the user clicks on one of the layer points
						// put in here what you want to do when the user clicks here eg. display pie chart in a panel.

						jQuery("#detailsPanel").hide(1000);
						jQuery("#detailsPanel").show(1000);

						var devValue;
						var tempString;

						var stringStart = infoWindowContent.search("Estimated");
						var stringEnd = stringStart + 150;
						tempString = infoWindowContent.substring(stringStart,stringEnd);
						
						var stringStart = tempString.search("center");
						var stringEnd = tempString.search("</td");
						devValue = tempString.substring(stringStart + 9,stringEnd);
						devValue = parseInt(devValue.replace(/,/g,""));

						var stringStart = infoWindowContent.search("white");
						var stringEnd = infoWindowContent.search("</fo");
						var file = infoWindowContent.substring(stringStart + 7,stringEnd);

						var multiplyer = Math.floor(Math.random() * 6) + 1;
						var totalValue = multiplyer * devValue;

						data = new google.visualization.DataTable();
						data.addColumn('string', 'Development');
						data.addColumn('number', 'Value');
						data.addRows([
							[file , devValue],
							['Other Developments (fictitious value)', totalValue],
						]);

				        var options = {'title':'Percentage of Total Development Cost',
				                       'width':300,
				                       'height':300};

						chart.draw(data, options);
					});
				};

				var mraDataLayer = new google.maps.visualization.MapsEngineLayer({
					layerId: '16075412419356476951-04034578232300933337',
					map: map,
					clickable: 'true',
					suppressInfoWindows: 'true',
				});
				addListener(mraDataLayer);

				// this is the listener for the "enter" keypress of the file search
				document.getElementById("docSearch").addEventListener("keydown", function(e) {
					if (!e) { var e = window.event; }
					//e.preventDefault(); // sometimes useful

					// Enter is pressed
					if (e.keyCode == 13) { $("#loading").show(); ajax('{{=URL("goToFile")}}',['docSearch'],'map-canvas'); }
				}, false);

				$("#loading").hide();
				$("#detailsPanel").hide();
			}

			var test = function() {
				alert("I ran");
			}

			var zoomto = function(lat, lng) {
				coords = new google.maps.LatLng(lat, lng);
				map.setCenter(coords);
				map.setZoom(19);
			}

		</script>

		<!-- jquery fancyness -->

		<script type="text/javascript">
			var showhide = function(id) {
				jQuery(id).toggle(1000);
			}
		</script>
	</head>

	<body onload="initialize()">
		<div id="loading"><img src="{{=URL('static','images/ajax_loader_gray_350.gif')}}"/></div>
		<div id="ngislogo"><img src="{{=URL('static','images/NGIS_Logo.png')}}" width="150"/></div>
		<div id="mapcontainer">

			<div id="map-canvas"></div>

			<div id="showhideleftpanel">
				<input class="showhidebuttonleft" type="image" src="{{=URL('static','images/control-double-down-icon.png')}}" onclick="showhide('#legend');showhide('#infoPanel');" />
			</div>

			<div id="legend">
				<img src="{{=URL('static','images/61-green-dot.png')}}" height="16" width="16"/>&nbsp;Commercial</br>
				<img src="{{=URL('static','images/123-red-dot.png')}}" height="16" width="16"/>&nbsp;Change of Use</br>
				<img src="{{=URL('static','images/111-purple-dot.png')}}" height="16" width="16"/>&nbsp;Community</br>
				<img src="{{=URL('static','images/157-yellow-dot.png')}}" height="16" width="16"/>&nbsp;Infrastructure/Ground Works</br>
				<img src="{{=URL('static','images/101-pink-dot.png')}}" height="16" width="16"/>&nbsp;Mixed Use</br>
				<img src="{{=URL('static','images/22-blue-dot.png')}}" height="16" width="16"/>&nbsp;Public Art</br>
				<img src="{{=URL('static','images/91-orange-dot.png')}}" height="16" width="16"/>&nbsp;Residential</br>
				<img src="{{=URL('static','images/169-ltblue-dot.png')}}" height="16" width="16"/>&nbsp;Subdivision</br>
			</div>

			<div id="searchBox">
				<input id="target" type="text" placeholder="Address Search">
			</div>

			<div id="infoPanel">
				<input name="docSearch" id="docSearch" type="text" placeholder="File Search">
<!-- 			This is commented out so that the infopanel is not prepopulated	
				{{for data in layerData:}}
					<div class="filelist" onclick="zoomto('{{=data[4]}}','{{=data[5]}}');">
						{{=data[0]}}</br>
						{{=data[2]}}
					</div>
				{{pass}} -->
			</div>

			<div id="detailsPanel">
				<input class="showhidebuttonright" type="image" src="{{=URL('static','images/control-double-down-icon.png')}}" onclick="showhide('#detailsPanel');" />
				<div id="locationDetails">

				</div>
			</div>
		</div>
	</body>

</html>